import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  @Input() appHighlight?: string;
  @Input() defaultColor?: string;

  constructor(
    private el: ElementRef,
  ) { }

  setColor(color: string){
    this.el.nativeElement.style.backgroundColor = color;
  }

  @HostListener('mouseenter') onMouseEnter() {
    this.setColor(this.appHighlight || this.defaultColor || 'red');
  }

  @HostListener('mouseleave') onMouseleave() {
    this.setColor('');
  }

}
